<script setup lang="ts">
import { ref, onActivated } from "vue";
import { useStoreOrder } from "../utils/hook";
import { useStoreOrderDetail } from "../detail/hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Refresh from "@iconify-icons/ep/refresh";
import sumImg from "@/assets/sum.png";
import { dealDataExcept, numberFormat } from "@/utils/common";

defineOptions({
  name: "StoreOrderCheck"
});

const formRef = ref();
const tableRef = ref();
const { isUpdate, upOrderGoods } = useStoreOrderDetail();
const {
  form,
  loading,
  columns,
  childColumns,
  dataList,
  pagination,
  deviceDetection,
  selectData,
  tabType,
  tabList,
  totalForm,
  onSearch,
  resetForm,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
  showOrderDetail,
  handleOpt
} = useStoreOrder(4, tableRef);

onActivated(() => {
  if (isUpdate.value) {
    onSearch();
  }
});
</script>

<template>
  <div style="box-shadow: none">
    <div :class="['flex', 'justify-between', deviceDetection() && 'flex-wrap']">
      <div class="w-full">
        <div class="header">
          <div class="sum">
            <div class="left">
              <div class="l-title">采购总金额</div>
              <div class="number">
                {{ numberFormat(dealDataExcept(totalForm.storeTotalPrice)) }}
              </div>
            </div>
            <img :src="sumImg" width="60" height="60" alt="" />
          </div>
          <div class="sum">
            <div class="left">
              <div class="l-title">采购商品总量</div>
              <div class="number">
                {{ numberFormat(totalForm.storeTotalNum) }}
              </div>
            </div>
            <img :src="sumImg" width="60" height="60" alt="" />
          </div>
          <div class="sum">
            <div class="left">
              <div class="l-title">采购订单量</div>
              <div class="number">
                {{ numberFormat(totalForm.storeOrderNum) }}
              </div>
            </div>
            <img :src="sumImg" width="60" height="60" alt="" />
          </div>
        </div>
        <!-- 筛选 -->
        <el-form
          ref="formRef"
          :inline="true"
          :model="form"
          class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
        >
          <el-form-item label="采购订单编号：" prop="storeOrderCode">
            <el-input
              v-model.trim="form.storeOrderCode"
              placeholder="请输入"
              clearable
              class="!w-[180px]"
            />
          </el-form-item>
          <el-form-item label="商品名称：" prop="goodsName">
            <el-input
              v-model="form.goodsName"
              placeholder="请输入"
              clearable
              class="!w-[180px]"
            />
          </el-form-item>
          <el-form-item label="商品编码：" prop="goodsCode">
            <el-input
              v-model="form.goodsCode"
              placeholder="请输入"
              clearable
              class="!w-[180px]"
            />
          </el-form-item>
          <el-form-item label="商品条码：" prop="barCode">
            <el-input
              v-model="form.barCode"
              placeholder="请输入"
              clearable
              class="!w-[180px]"
            />
          </el-form-item>
          <el-form-item label="规格名称：" prop="specName">
            <el-input
              v-model="form.specName"
              placeholder="请输入"
              clearable
              class="!w-[180px]"
            />
          </el-form-item>
          <el-form-item label="规格编码：" prop="specCode">
            <el-input
              v-model="form.specCode"
              placeholder="请输入"
              clearable
              class="!w-[180px]"
            />
          </el-form-item>
          <!-- <el-form-item
            v-if="isStoreManager == 0"
            label="门店名称："
            prop="storeName"
          >
            <el-input
              v-model="form.storeName"
              placeholder="请输入"
              clearable
              class="!w-[180px]"
            />
          </el-form-item> -->
          <el-form-item label="收货仓库：" prop="depositoryId">
            <el-select
              v-model="form.depositoryId"
              placeholder="请选择"
              clearable
              filterable
              class="!w-[180px]"
            >
              <el-option
                v-for="item in selectData.ckList"
                :key="item.id"
                :label="item.depositoryName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="业务日期：" prop="businessDate">
            <el-date-picker
              v-model="form.businessDate"
              class="!w-[250px]"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYYMMDD"
            />
          </el-form-item>
          <!-- 主订单状态 0 待审核 1 发货中 2 部分发货 3 已发货 4 已完成 5 已驳回 6 已取消 7 已关闭 -->
          <!-- <el-form-item label="状态" prop="status">
            <el-select
              v-model="form.status"
              placeholder="请选择"
              clearable
              class="!w-[180px]"
            >
              <el-option label="待审核" :value="0" />
              <el-option label="发货中" :value="1" />
              <el-option label="部分发货" :value="2" />
              <el-option label="已发货" :value="3" />
              <el-option label="已完成" :value="4" />
              <el-option label="已驳回" :value="5" />
              <el-option label="已取消" :value="6" />
              <el-option label="已关闭" :value="7" />
            </el-select>
          </el-form-item> -->
          <el-form-item label="创建人：" prop="createUserId">
            <el-select
              v-model="form.createUserId"
              clearable
              filterable
              placeholder="请选择"
              class="!w-[180px]"
            >
              <el-option
                v-for="item in selectData.userList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :icon="useRenderIcon('ri:search-line')"
              :loading="loading"
              @click="onSearch"
            >
              搜索
            </el-button>
            <el-button
              :icon="useRenderIcon(Refresh)"
              @click="resetForm(formRef)"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>

        <PureTableBar title="" :columns="columns" @refresh="onSearch">
          <template #left>
            <!-- 主订单状态 0 待审核 1 发货中 2 部分发货 3 已发货 4 已完成 5 已驳回 6 已取消 7 已关闭 -->
            <el-tabs v-model="tabType" class="mt-[15px] h-[28px]">
              <el-tab-pane
                v-for="(item, index) in tabList"
                :key="index"
                :name="item.name"
              >
                <template #label>
                  <span>{{ item.label }}</span>
                  <span v-if="item.count" class="pl-1">
                    ({{ item.count }})</span
                  >
                </template>
              </el-tab-pane>
            </el-tabs>
          </template>
          <template v-slot="{ size, dynamicColumns }">
            <div class="goods-table">
              <pure-table
                ref="tableRef"
                row-key="id"
                adaptive
                :adaptiveConfig="{ offsetBottom: 90 }"
                align-whole="center"
                :loading="loading"
                :size="size"
                :data="dataList"
                :columns="dynamicColumns"
                :pagination="{ ...pagination, size }"
                show
                showOverflowTooltip
                :header-cell-style="{
                  background: 'var(--el-fill-color-light)',
                  color: 'var(--el-text-color-primary)'
                }"
                @selection-change="handleSelectionChange"
                @page-size-change="handleSizeChange"
                @page-current-change="handleCurrentChange"
              >
                <template #expand="{ row }">
                  <div class="ml-[76px]">
                    <!-- ==================================== 子表格 =========================== -->
                    <pure-table
                      row-key="id"
                      class="bd-hide"
                      align-whole="center"
                      :data="row.orderItemResponses"
                      :columns="childColumns"
                      :header-cell-style="{
                        background: 'var(--el-fill-color-light)',
                        color: 'var(--el-text-color-primary)'
                      }"
                    />
                  </div>
                </template>
                <!-- 门店角色 -->
                <template #operation="{ row }">
                  <el-button
                    link
                    type="primary"
                    :size="size"
                    @click="showOrderDetail(row)"
                  >
                    查看
                  </el-button>
                  <el-button
                    v-if="row.status == 0"
                    link
                    type="primary"
                    class="!ml-2"
                    :size="size"
                    @click="upOrderGoods(row, 1).then(() => onSearch())"
                  >
                    修改
                  </el-button>
                  <el-popconfirm
                    :title="`是否取消订单: '${row.storeOrderCode}' ?`"
                    @confirm="handleOpt(row, 3)"
                  >
                    <template #reference>
                      <span class="ml-2">
                        <el-button
                          v-if="row.status == 0"
                          link
                          type="primary"
                          :size="size"
                        >
                          取消订单
                        </el-button>
                      </span>
                    </template>
                  </el-popconfirm>
                </template>
                <!-- 驻店店长角色 -->
                <template #masterOperation="{ row }">
                  <!-- 查看详情 -->
                  <el-button
                    link
                    type="primary"
                    :size="size"
                    @click="showOrderDetail(row)"
                  >
                    查看
                  </el-button>

                  <!-- 审核通过 -->
                  <el-popconfirm
                    :title="`是否确认审核通过: '${row.storeOrderCode}' ?`"
                    @confirm="handleOpt(row, 1)"
                  >
                    <template #reference>
                      <span class="ml-2">
                        <el-button
                          v-if="row.status == 0"
                          link
                          type="primary"
                          :size="size"
                        >
                          通过
                        </el-button>
                      </span>
                    </template>
                  </el-popconfirm>
                  <!-- 驳回 -->
                  <el-popconfirm
                    :title="`是否确认驳回: '${row.storeOrderCode}' ?`"
                    @confirm="handleOpt(row, 2)"
                  >
                    <template #reference>
                      <span class="ml-2">
                        <el-button
                          v-if="row.status == 0"
                          link
                          type="primary"
                          :size="size"
                        >
                          驳回
                        </el-button>
                      </span>
                    </template>
                  </el-popconfirm>
                </template>
              </pure-table>
            </div>
          </template>
        </PureTableBar>
      </div>
    </div>
  </div>
</template>
<style>
.el-popconfirm__main {
  overflow-wrap: break-word;
  word-break: break-all;
}
</style>
<style lang="scss" scoped>
:deep(.bd-hide .el-table--fit .el-table__inner-wrapper:before) {
  background-color: #fff;
}
:deep(.icon-no .el-table__expand-icon) {
  display: none;
}
.header {
  margin-bottom: 15px;
  display: flex;
  .sum {
    width: auto;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 5px;
    margin-right: 15px;
    .left {
      width: 120px;
      .l-title {
        color: #999;
        font-size: 13px;
        margin-bottom: 2px;
      }
      .number {
        font-size: 22px;
        font-weight: bold;
      }
    }
  }
}
</style>
